<template>
  <view class="report-reason-container">
    <!-- 页头 -->
    <view class="header">
      <view class="header-content">
        <view class="back-btn" @click="goBack">
          <image
            class="back-icon"
            src="/static/icons/candidate/pre_page.png"
          ></image>
        </view>
        <text class="header-title">举报职位</text>
        <view class="header-right"></view>
      </view>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 举报原因列表 -->
    <view v-else class="content">
      <view class="tip-text">请选择举报原因：</view>
      
      <view class="reason-list">
        <view 
          class="reason-item" 
          v-for="reason in firstLevelReasons" 
          :key="reason.id"
          @click="selectReason(reason)"
        >
          <view class="reason-content">
            <text class="reason-title">{{ reason.value }}</text>
            <text class="reason-desc">{{ reason.remark }}</text>
          </view>
          <view class="reason-arrow">
            <uni-icons 
              v-if="hasSubReasons(reason.dataKey)" 
              type="arrowright" 
              size="16" 
              color="#c0c0c0"
            ></uni-icons>
            <view v-else class="radio-btn" :class="{ 'selected': selectedReason?.id === reason.id }">
              <view v-if="selectedReason?.id === reason.id" class="radio-dot"></view>
            </view>
          </view>
        </view>
      </view>

      <!-- 移除了底部确定按钮 -->
    </view>

    <!-- 二级选择弹出层 -->
    <uni-popup ref="subReasonPopup" type="bottom">
      <view class="sub-reason-modal">
        <view class="modal-header">
          <text class="modal-title">具体情况说明</text>
          <view class="close-btn" @click="closeSubPopup">
            <uni-icons type="close" size="20" color="#666"></uni-icons>
          </view>
        </view>
        
        <view class="sub-reason-list">
          <view 
            class="sub-reason-item" 
            v-for="subReason in currentSubReasons" 
            :key="subReason.id"
            @click="selectSubReason(subReason)"
          >
            <view class="sub-reason-content">
              <text class="sub-reason-title">{{ subReason.value }}</text>
              <text class="sub-reason-desc">{{ subReason.remark }}</text>
            </view>
            <view class="radio-btn" :class="{ 'selected': selectedSubReason?.id === subReason.id }">
              <view v-if="selectedSubReason?.id === subReason.id" class="radio-dot"></view>
            </view>
          </view>
        </view>

        <view class="modal-footer">
          <view 
            class="modal-confirm-btn" 
            :class="{ 'disabled': !selectedSubReason }"
            @click="confirmSubSelection"
          >
            <text class="btn-text">确定</text>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getDictionary } from '@/api/resume.js';

// 页面参数
const jobId = ref('');

// 数据状态
const loading = ref(true);
const allReasons = ref([]);
const firstLevelReasons = ref([]);
const currentSubReasons = ref([]);
const selectedReason = ref(null);
const selectedSubReason = ref(null);

// 弹出层引用
const subReasonPopup = ref(null);

// 获取页面参数
const getPageParams = () => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const options = currentPage.options || {};
  
  jobId.value = options.jobId || '';
  console.log('举报页面获取到的jobId:', jobId.value);
};

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 获取举报原因数据
const fetchReportReasons = async () => {
  try {
    loading.value = true;
    console.log('开始获取举报原因数据...');
    
    const response = await getDictionary('job_report_reason');
    console.log('获取到的举报原因数据:', response);
    
    if (response && Array.isArray(response)) {
      allReasons.value = response;
      
      // 过滤出一级数据（parentDataKey为null）
      firstLevelReasons.value = response
        .filter(item => item.parentDataKey === null)
        .sort((a, b) => a.sort - b.sort);
      
      console.log('一级举报原因:', firstLevelReasons.value);
    }
  } catch (error) {
    console.error('获取举报原因失败:', error);
    uni.showToast({
      title: '获取举报原因失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 检查是否有子级数据
const hasSubReasons = (dataKey) => {
  return allReasons.value.some(item => item.parentDataKey === dataKey);
};

// 选择举报原因
const selectReason = (reason) => {
  console.log('选择的一级原因:', reason);
  
  if (hasSubReasons(reason.dataKey)) {
    // 有子级数据，显示二级选择弹出层
    currentSubReasons.value = allReasons.value
      .filter(item => item.parentDataKey === reason.dataKey)
      .sort((a, b) => a.sort - b.sort);
    
    selectedSubReason.value = null; // 重置二级选择
    subReasonPopup.value.open();
  } else {
    // 没有子级数据，直接跳转到证据页面
    selectedReason.value = reason;
    selectedSubReason.value = null;
    navigateToEvidencePage(reason);
  }
};

// 选择二级原因
const selectSubReason = (subReason) => {
  selectedSubReason.value = subReason;
  console.log('选择的二级原因:', subReason);
};

// 确认二级选择
const confirmSubSelection = () => {
  if (!selectedSubReason.value) {
    uni.showToast({
      title: '请选择具体原因',
      icon: 'none'
    });
    return;
  }
  
  // 将二级原因设为最终选择并跳转到证据页面
  selectedReason.value = selectedSubReason.value;
  subReasonPopup.value.close();
  
  // 跳转到补充举报证据页面
  navigateToEvidencePage(selectedSubReason.value);
};

// 关闭二级弹出层
const closeSubPopup = () => {
  subReasonPopup.value.close();
  selectedSubReason.value = null;
};

// 跳转到补充举报证据页面
const navigateToEvidencePage = (reason) => {
  console.log('跳转到证据页面，选择的原因:', reason);
  
  const reportData = {
    jobId: jobId.value,
    reasonId: reason.id,
    reasonKey: reason.dataKey,
    reasonValue: reason.value,
    reasonRemark: reason.remark
  };
  
  // 将举报数据存储到本地，供证据页面使用
  uni.setStorageSync('reportData', reportData);
  
  uni.navigateTo({
    url: `/pages/candidate/position/reportEvidence?jobId=${jobId.value}&reasonValue=${encodeURIComponent(reason.value)}`
  });
};

// 页面加载
onMounted(() => {
  getPageParams();
  fetchReportReasons();
});
</script>

<style scoped lang="less">
.report-reason-container {
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 页头样式 */
.header {
  background-color: #ffffff;
  border-bottom: 1px solid #f0f0f0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  height: 88rpx;
}

.back-btn {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.header-right {
  width: 60rpx;
}

/* 加载状态 */
.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 内容区域 */
.content {
  padding: 0;
}

.tip-text {
  background-color: #fff;
  padding: 30rpx;
  font-size: 28rpx;
  color: #666;
  border-bottom: 1px solid #f0f0f0;
}

/* 举报原因列表 */
.reason-list {
  background-color: #fff;
}

.reason-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.reason-item:active {
  background-color: #f5f5f5;
}

.reason-content {
  flex: 1;
  margin-right: 20rpx;
}

.reason-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 8rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reason-desc {
  font-size: 26rpx;
  color: #999;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.reason-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 单选按钮样式 */
.radio-btn {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-btn.selected {
  border-color: #00bdb4;
}

.radio-dot {
  width: 20rpx;
  height: 20rpx;
  background-color: #00bdb4;
  border-radius: 50%;
}

/* 移除了底部按钮样式 */

/* 二级选择弹出层样式 */
.sub-reason-modal {
  background-color: #fff;
  border-radius: 16rpx 16rpx 0 0;
  max-height: 80vh;
  overflow: hidden;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.modal-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.close-btn {
  width: 48rpx;
  height: 48rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sub-reason-list {
  max-height: 60vh;
  overflow-y: auto;
}

.sub-reason-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.sub-reason-item:active {
  background-color: #f5f5f5;
}

.sub-reason-content {
  flex: 1;
  margin-right: 20rpx;
}

.sub-reason-title {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  display: block;
  margin-bottom: 6rpx;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.sub-reason-desc {
  font-size: 24rpx;
  color: #999;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.modal-footer {
  padding: 20rpx 30rpx 30rpx 30rpx;
  border-top: 1px solid #f0f0f0;
}

.modal-confirm-btn {
  height: 80rpx;
  background-color: #00bdb4;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-confirm-btn.disabled {
  background-color: #d9d9d9;
}

.modal-confirm-btn.disabled .btn-text {
  color: #999;
}
</style>
